<template>
  <div class="container">
    <!-- 顶部按钮模块 -->
    <div class="hang">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit" class="add-btn" size="small"
        ><router-link to="new">新增试题</router-link></el-button
      >
    </div>

    <!-- 目录模块 -->
    <el-form>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="学科">
              <el-select size="small" v-model="form.subjectID" @change="getDirectory">
                <el-option v-for="(item, index) in subjectList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select placeholder="请选择" v-model="form.catalogID">
              <el-option
                v-for="(item, index) in DirectoryLIst"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select placeholder="请选择" v-model="form.tags">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input placeholder="根据题干搜索" v-model="form.keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select placeholder="请选择" v-model="form.questionType">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select placeholder="请选择" v-model="form.difficulty">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select placeholder="请选择" v-model="form.direction">
              <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="互联网金融" value="互联网金融"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
              <el-select placeholder="请选择" size="small" v-model="form.creatorID">
                <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select size="small" v-model="form.city" class="city" style="width: 95px; margin-right: 5px" @change="changeCity">
                <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select size="small"  style="width: 92px; margin-right: 5px" v-model="form.province" class="city">
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-col :span="6">
            <el-button size="small" @click="clearFrom">清除</el-button>
            <el-button type="primary" size="small" @click="getList">搜索</el-button>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <div>
      <el-alert title="数据一共条" type="info" show-icon :closable="false"></el-alert>
    </div>
    <!-- 详情模块 -->
      <el-table :data="catalogList"  style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
        <el-table-column prop="subject" label="学科" width="106"> </el-table-column>
        <el-table-column prop="catalog" label="目录" width="102"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="102">
          <template slot-scope="scope">
            {{ti[scope.row.questionType]}}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template slot-scope="scope"><span v-html="scope.row.question"></span></template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template slot-scope="scope">{{ scope.row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="102">
          <template slot-scope="scope">
            {{nan[scope.row.difficulty]}}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="102"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-view"
              plain
              circle
              title="预览"
              size="small"
              @click="preview(scope.row.id)"
            ></el-button>
            <el-button type="success" icon="el-icon-edit" size="small" plain circle title="修改" @click="set(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" plain circle title="删除" @click="del(scope.row)"></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              plain
              circle
              size="small"
              title="加入精选"
              @click="addJing(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="form.pagesize"
            layout="prev, pager, next,sizes, jumper"
            :total="total">
          </el-pagination>
      </div>
    <!-- 预览 弹出框 -->
    <el-dialog
      title="题目预览"
      :model="detailList"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="66%"
    >
    <questions-preview :TableID="TableItemData"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import questionsPreview  from '../components/questions-preview'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple, catalog } from '@/api/hmmm/subjects.js'
import { Usersimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as DirectoryList } from '@/api/hmmm/directorys'
export default {
  data() {
    return {
      form: {
        page: 1,
        pagesize: 3
      },
      ti: ['单选', '多选', '简答'],
      nan: ['简单', '一般', '困难'],
      userList: [], // 录入人
      catalogList: [], // 表格数据
      provinces: [], // 城市
      citys: [],
      TableItemData: 0,
      // 题型详情列表
      currentPage4: 0,
      total:0,
      DirectoryLIst: [], // 目录
      detailList: [],
      subjectList: [],
      twoLevelDirectoryList: [],
      // 学科
      // subject: '',
      // catalog: '',
      // tags: '',
      // keyword: '',
      // questionType: '',
      // difficulty: '',
      // direction: '',
      // creator: '',
      // shortName: '',
      // province: '',
      // remarks: '',
      // city: '',
      dialogVisible: false
    }
  },
  created() {
    this.getList()
    this.getcity()
    this.getSubjectList()
    this.getUserList()
  },
  components: {
    questionsPreview
  },
  methods: {
    // 获取详情
    async getDirectory () { // 获取目录
      const { data } = await DirectoryList({ subjectID: this.form.subjectID })
      this.DirectoryLIst = data
    },
    getcity() { // 获取市区
      this.provinces = provinces()
    },
    changeCity() { // 获取城市
      this.citys = citys(this.form.city)
    },
    async getUserList() { // 获取用户信息
       const { data } = await Usersimple()
       this.userList = data
     },
    async getList() { // 获取表格数据
      const { data } = await list(this.form)
      this.catalogList = data.items
      this.tableList = data.items
      this.currentPage4 = data.page - 0
      this.total = data.counts
      // console.log(this.catalogList)
    },
    clearFrom() { //重置表单
      this.form = {
        page: 1,
        pagesize: 3
      }
      this.getList()
    },
    async preview(id) {
      this.dialogVisible = true
      this.TableItemData = id
    },
    // 学科目录
    async getSubjectList() {
      const { data } = await simple()
      this.subjectList = data
    },
    handleSizeChange (val) {// 分页大小变化
      this.form.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {// 换页
      this.form.page = val
      this.getList()
    },
    set (data) { // 修改
      this.$router.push({
        path: '/questions/new',
        query: { // 需要携带的参数
          id: data
        }
      })
    },
    del (data) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove(data)
          this.catalogList.forEach((i, m) => {
            if ( i.id === data.id) return this.catalogList.splice(m, 1)
          })
          if (this.catalogList.length === 0) { // 操作完的效果
            this.currentPage4 = this.currentPage4 - 1 < 1 ? 1 : this.currentPage4 - 1
            this.handleCurrentChange(this.currentPage4)
            setTimeout(() => { // 异步 需要时间
              this.total = this.total - 1
            }, 100)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })      
        })
    },
    addJing (data) {
      this.$confirm('此操作将试题加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          data.choiceState = 1
          remove(data)
          this.catalogList.forEach((i, m) => {
            if ( i.id === data.id) return this.catalogList.splice(m, 1)
          })
          if (this.catalogList.length === 0) { // 操作完的效果
            this.currentPage4 = this.currentPage4 - 1 < 1 ? 1 : this.currentPage4 - 1
            this.handleCurrentChange(this.currentPage4)
            setTimeout(() => { // 异步 需要时间
              this.total = this.total - 1
            }, 100)
          }
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入精选'
          })      
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding: 20px;
  margin: 10px 10px;
  background-color: #fff;
  .hang {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    span {
      color: pink;
      font-size: 12px;
    }
    .add-btn {
      border-radius: 3px;
      font-size: 12px;
    }
  }
  .el-form-item {
    float: right;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    margin-bottom: 18px;
    .el-select {
      width: 196px;
    }
    .el-input {
      width: 196px;
    }
    .city {
      width: 157px;
    }
    .citys {
      display: flex;
      justify-content: space-between;
    }
  }
  .page {
  text-align: right;
  margin-top: 20px;
 .el-pagination__jump {
    margin: 0;
  }
}
  .el-dialog__footer {
  text-align: right!important;
}
}
</style>
